<!-- 回款列表-新建回款信息组件  -->
<template>
  <a-modal
    width="80%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
  >
    <template #title> 新建回款信息 </template>
    <div>
      <a-form :model="form" :rules="rules" auto-label-width>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="returnedCode" label="回款编号：">
              <a-input
                placeholder="请输入回款编号"
                size="large"
                v-model="form.collectionNumber"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="returnedType" label="回款类别：">
              <a-select
                placeholder="请选择回款类别"
                v-model="form.collectionTypeId"
              >
                <a-option
                  v-for="item in settingData"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="returnedWays" label="回款方式：">
              <a-input
                style="color: black"
                placeholder="请输入回款编号"
                size="large"
                v-model="form.payMode"
                allow-clear
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="returnedTime" label="回款时间：">
              <a-date-picker v-model="form.createdAt" disabled />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="accountName" label="账号名称：">
              <a-cascader
                :field-names="fieldNames"
                :options="tableList.list"
                :style="{ width: '320px' }"
                v-model="form.accountId"
                @change="cgeAccount"
                placeholder="Please select ..."
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="account" label="账号：">
              <a-input
                placeholder="请填写账号"
                size="large"
                v-model="form.account"
                allow-clear
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="bank" label="开户行：">
              <a-input
                placeholder="请输入回款编号"
                size="large"
                v-model="form.bank"
                allow-clear
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="returnedMoney" label="回款金额：">
              <a-input-number
                :min="1"
                placeholder="请输入回款金额"
                allow-clear
                :max="form.waitCollectionPrice"
                v-model="form.collectionPrice"
              >
                <template #prepend>￥</template>
                <template #append>
                  <a-select
                    :style="{
                      width: '100px',
                    }"
                    placeholder="人民币"
                    v-model="form.collectionPriceUnit"
                  >
                    <a-option>人民币</a-option>
                    <a-option>美金</a-option>
                  </a-select>
                </template>
              </a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="contractMoney" label="总金额：">
              <a-input-number
                :min="1"
                placeholder="请输入总额"
                v-model="orderInfoData.orderInfo.totalPrice"
                disabled
              >
                <template #prepend>￥</template>
                <template #append>
                  <a-select
                    :style="{
                      width: '100px',
                    }"
                    placeholder="人民币"
                    v-model="orderInfoData.orderInfo.totalPriceUnit"
                  >
                    <a-option>人民币</a-option>
                    <a-option>美金</a-option>
                  </a-select>
                </template>
              </a-input-number>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="AccuReturnedMoney" label="累计回款金额：">
              <a-input-number
                :min="1"
                placeholder="请输入累计回款金额"
                v-model="orderInfoData.orderInfo.accumulatedCollectionPrice"
                disabled
              >
                <template #prepend>￥</template>
                <template #append>
                  <a-select
                    :style="{
                      width: '100px',
                    }"
                    placeholder="人民币"
                    v-model="
                      orderInfoData.orderInfo.accumulatedCollectionPriceUnit
                    "
                  >
                    <a-option>人民币</a-option>
                    <a-option>美金</a-option>
                  </a-select>
                </template>
              </a-input-number>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="noReturnedMoney" label="未回款金额：">
              <a-input-number
                :min="1"
                placeholder="请输入未回款金额"
                v-model="orderInfoData.orderInfo.waitCollectionPrice"
                disabled
              >
                <template #prepend>￥</template>
                <template #append>
                  <a-select
                    :style="{
                      width: '100px',
                    }"
                    placeholder="人民币"
                    v-model="orderInfoData.orderInfo.waitCollectionPriceUnit"
                  >
                    <a-option>人民币</a-option>
                    <a-option>美金</a-option>
                  </a-select>
                </template>
              </a-input-number>
            </a-form-item>
          </a-col>
        </a-row>

        <!-- <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="file" label="凭证上传：">
              <a-upload action="/"></a-upload>
            </a-form-item>
          </a-col>
        </a-row> -->
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, watchEffect, watch, ref, inject } from 'vue';
  import { cloneDeep } from 'lodash';
  import {
    GetAccountInfo,
    PostAccountInfo,
    DelAccountInfo,
    GetReceivableAccount,
    getCollectionInfo,
  } from '@/api/order-management/returned-management/base-setting';
  import { GetReturnedTypeInfo } from '@/api/order-management/returned-management/base-setting';
  import { Message } from '@arco-design/web-vue';
  import { useOrderStore } from '@/store';
  import miiter from '@/utils/mitt';

  const orderInfoData = useOrderStore();
  // 获取回款类型设置基本信息
  const settingData = ref();
  const getClientSettingInfo = async () => {
    const res = await GetReturnedTypeInfo();
    settingData.value = res;
  };

  getClientSettingInfo();

  const data: any = inject('sendInfo');
  console.log(data);
  miiter.on('returnedInfo', (val) => {
    console.log('qqw', val);
  });

  const form = ref<any>({
    id: undefined,
    collectionNumber: '',
    collectionId: undefined,
    payMode: '',
    collectionAccountId: undefined,
    collectionTime: undefined,
    totalPrice: 0,
    totalPriceUnit: '人民币',
    collectionProofFileId: undefined,
    createdAt: undefined,
    updatedAt: undefined,
    deletedAt: undefined,
    account: undefined,
    bank: '',
    collectionPrice: 0,
    collectionPriceUnit: '',
    waitCollectionPrice: 0,
    waitCollectionPriceUnit: '人民币',
    receivablePrice: 0,
    receivablePriceUnit: '人民币',
    accumulatedCollectionPrice: 0,
    accumulatedCollectionPriceUnit: '人民币',
  });

  const amountForm = ref({
    orderId: null,
    waitCollectionPrice: 0,
    waitCollectionPriceUnit: '人民币',
    receivablePrice: 0,
    receivablePriceUnit: '人民币',
    accumulatedCollectionPrice: 0,
    accumulatedCollectionPriceUnit: '人民币',
  });

  // const formPriceData = reactive({});

  const formKey = Object.keys(amountForm.value);
  const props = withDefaults(
    //参数说明
    defineProps<{
      visible: boolean;
      id: number;
    }>(),
    {
      visible: false,
    }
  );

  const emit = defineEmits(['update:visible', 'editReturnedEmit']);

  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  // let form = ref<any>({});

  // 储存账户数据
  const tableList = reactive<any>({
    list: [],
  });
  const fieldNames = {
    value: 'id',
    label: 'accountName',
    children: 'accountData',
  };
  // 获取账户数据
  const getData = async () => {
    try {
      const res = await GetAccountInfo({
        pageData: {
          page: 0,
          size: -1,
        },
      });
      let id = 1; // 后端的结构最外层没返回id，自己设置一个id
      res.forEach((item: any) => {
        id += 1;
        item.id = id;
        item.accountName = item.typeName;
        delete item.typeName;
      });
      tableList.list = JSON.parse(JSON.stringify(res));
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getData();

  // 根据订单id获取账户信息
  const cgeAccount = async (id) => {
    const res = await GetReceivableAccount({ id });
    form.value.bank = res.AccountBank;
    form.value.account = res.AccountNumber;
  };

  // 获取回款详情信息
  const getCollectionData = async (id: number) => {
    const res = await getCollectionInfo({ id: props.id });
    form.value = res;
    cgeAccount(res.accountId);
  };
  getCollectionData();
  const rules = reactive({});

  // 保存按钮
  const handleOk = () => {
    emit('editReturnedEmit', form.value);
    modalVisible.value = false;
  };

  // 取消按钮
  const handleCancel = () => {
    modalVisible.value = false;
  };
</script>

<style scoped lang="less"></style>
